<template>
  <layout-view :tab-index="2" heightFill>
    <template #content>
      <div class="group">
        <div class="category">
          <el-tag class="category-item" :effect="effectIndex === -1 ? 'dark' :'plain'" @click="clickItem('',-1)">全部</el-tag>
          <el-tag class="category-item" v-for="(category,index) in categoryList" :key="category.categoryId" @click="clickItem(category.categoryId,index)" :effect="effectIndex === index ? 'dark' :'plain'">{{category.categoryName}}</el-tag>
        </div>
        <book-list :book-list="bookList"/>
        <el-pagination style="text-align: center" hide-on-single-page :current-page="pageInfo.page" :page-size="pageInfo.limit" @current-change="currentChange" :total="pageInfo.total" layout="prev,pager,next"/>
      </div>
    </template>
  </layout-view>
</template>
<script>
import LayoutView from '@/components/LayoutView.vue'
import BookList from '@/components/BookList.vue'

export default {
  name: 'CategoryView',
  components: { LayoutView, BookList },
  data () {
    return {
      categoryList: [],
      effectIndex: -1,
      bookList: [],
      pageInfo: {
        page: 1,
        limit: 5,
        total: 0,
        categoryId: ''
      }
    }
  },
  methods: {
    getCategoryList () {
      this.$http.get('api/v1/book/category/list').then(data => {
        if (data) {
          this.categoryList = [...data]
        }
      }).catch(() => {})
    },
    clickItem (categoryId, index) {
      this.effectIndex = index
      this.pageInfo.categoryId = categoryId
      this.getBookList()
    },
    getBookList () {
      let url = 'api/v1/book/page'
      if (this.pageInfo.categoryId) {
        url = 'api/v1/book/category/page'
      }
      this.$http.get(url, this.pageInfo).then(data => {
        if (data) {
          this.bookList = [...data.records]
          this.pageInfo.total = data.total
        }
      })
    },
    currentChange (val) {
      this.pageInfo.page = val
      this.getBookList()
    }
  },
  created () {
    this.getCategoryList()
    this.getBookList()
  }
}
</script>

<style scoped lang="scss">
.group {
  width: 980px;
  margin: 10px auto;
  background-color: whitesmoke;
  .category{
    height: 60px;
    display: flex;
    align-items: center;
    .category-item{
      margin:0 5px;
      cursor: pointer;
    }
  }
}

</style>
